<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增员工 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/employee-view.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="employee-view-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <a th:href="@{/employee}" class="btn btn-back">← 返回员工列表</a>
        </div>

        <!-- 页面标题 -->
        <div class="module-header">
            <h1 class="module-title">新增员工</h1>
        </div>

        <!-- 新增表单 -->
        <form th:action="@{/employee/add}" method="post" class="employee-card">
            <!-- 基本信息区 -->
            <div class="info-section">
                <h2 class="section-title">基本信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">姓名：</label>
                        <input type="text" class="form-control" name="realName" required>
                    </div>
                    <div class="info-item">
                        <label class="info-label">性别：</label>
                        <select class="form-control" name="gender" required>
                            <option value="">请选择性别</option>
                            <option th:each="gender : ${T(com.hibernate.hrm.entity.User.Gender).values()}"
                                    th:value="${gender}"
                                    th:text="${gender}"></option>
                        </select>
                    </div>
                    <div class="info-item">
                        <label class="info-label">出生日期：</label>
                        <input type="date" class="form-control" name="birthday" required>
                    </div>
                </div>
            </div>

            <!-- 身份信息区 -->
            <div class="info-section">
                <h2 class="section-title">身份信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">身份证号：</label>
                        <input type="text" class="form-control" name="idNumber" required>
                    </div>
                </div>
            </div>

            <!-- 工作信息区 -->
            <div class="info-section">
                <h2 class="section-title">工作信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">部门：</label>
                        <select class="form-control" name="departmentID" id="departmentSelect" required>
                            <option value="">选择部门</option>
                            <option th:each="dept : ${departments}"
                                    th:value="${dept.departmentID}"
                                    th:text="${dept.departmentName}"></option>
                        </select>
                    </div>
                    <div class="info-item">
                        <label class="info-label">职位：</label>
                        <select class="form-control" name="jobPositionID" id="positionSelect" required>
                            <option value="">选择职位</option>
                            <!-- 将通过JS动态加载 -->
                        </select>
                    </div>
                    <div class="info-item">
                        <label class="info-label">入职日期：</label>
                        <input type="date" class="form-control" name="startingDate" required>
                    </div>
                </div>
            </div>

            <!-- 教育信息区 -->
            <div class="info-section">
                <h2 class="section-title">教育信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">学历：</label>
                        <input type="text" class="form-control" name="education" required>
                    </div>
                    <div class="info-item">
                        <label class="info-label">专业：</label>
                        <input type="text" class="form-control" name="major" required>
                    </div>
                </div>
            </div>

            <!-- 联系信息区 -->
            <div class="info-section">
                <h2 class="section-title">联系信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">邮箱：</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="info-item">
                        <label class="info-label">电话：</label>
                        <input type="tel" class="form-control" name="phone" required>
                    </div>
                </div>
            </div>

            <!-- 账户信息区 -->
            <div class="info-section">
                <h2 class="section-title">账户信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">初始密码：</label>
                        <input type="password" class="form-control" name="password" value="123456" required>
                        <small class="form-text">默认密码: 123456</small>
                    </div>
                </div>
            </div>

            <!-- 表单操作按钮 -->
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-cancel" onclick="history.back()">取消</button>
            </div>
        </form>

        <script th:inline="javascript">
            document.addEventListener('DOMContentLoaded', function() {
                const departmentSelect = document.getElementById('departmentSelect');
                const positionSelect = document.getElementById('positionSelect');

                // 部门变更时更新职位选项
                departmentSelect.addEventListener('change', function() {
                    const departmentId = this.value;
                    positionSelect.innerHTML = '<option value="">选择职位</option>';

                    if (departmentId) {
                        fetch('/api/positions/by-department/' + departmentId)
                            .then(response => response.json())
                            .then(positions => {
                                positions.forEach(position => {
                                    const option = document.createElement('option');
                                    option.value = position.positionId;
                                    option.textContent = position.positionName;
                                    positionSelect.appendChild(option);
                                });
                            });
                    }
                });
            });
        </script>
    </main>
</div>
</body>
</html>